<template>
  <view class="h-tab-wrap">
    <view class="h-tab-title-wraps">
      <view :class="['h-tab-title-wrap', flex ? 'h-tab-title-flex-wrap' : '']" :style="{width: width}">
        <view v-for="(item, index) in childrenArr" :class="['h-tab-pane', nameActive && nameActive === item.name ? 'h-tab-pane-active' : '']" @tap="handleTab(item, index)">
          {{item.label}}
        </view>
        <view class="h-tab-pane-line" :style="{left: left, width: lineWidth}"></view>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  name: "hTab",
  provide() {
    return {
      hTab: this
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    flex: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      childrenArr: [],
      nameActive: '',
      width: '100%',
      left: '0',
      lineWidth: 0
    }
  },
  created() {
    this.childrenArr = []
  },
  mounted() {
    this.handleReset()
    if(!this.flex) {
      this.width = this.childrenArr.length * 240 + 'rpx'
    }
    else {
      this.width = '100%'
    }

    if(this.value) {
      this.nameActive = this.value
    }
    setTimeout(() => {
      const query = Taro.createSelectorQuery()
      console.log(query.selectAll('.h-tab-pane'))
      query.selectAll('.h-tab-pane').boundingClientRect(data => {
        let left = 0
        let {width} = data[0]
        this.lineWidth = width+'PX' || 0
        this.left = left + 'PX' || 0
      }).exec()
      this.nameActive = this.childrenArr[0]?.name || ''
    }, 100)

  },
  methods: {
    handleAdd(that){
      this.childrenArr.push(that)
    },
    handleTab(val, index) {
      this.nameActive = val?.name
      const query = Taro.createSelectorQuery()
      query.selectAll('.h-tab-pane').boundingClientRect(data => {
        let left = 0
        for(let i = 0; i < index; i++) {
          let {width} = data[i]
          if(width) {
            left += width
          }
        }
        let {width} = data[index]
        this.lineWidth = width+'PX'
        this.left = left + 'PX'
      }).exec()

      this.$emit('input', val?.name)
      this.$emit('tab-click', val?.name)
    },
    handleReset() {
      this.nameActive = ''
    }
  }
}
</script>

<style>
.h-tab-wrap {
  width: 100%;
  height: auto;
  position: relative;
  overflow-x: hidden;
}
.h-tab-title-wraps {
  width: 100%;
  height: auto;
  overflow-y: hidden;
  overflow-x: auto;
}
.h-tab-title-wrap {
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow-x: auto;
  position: relative;
}
.h-tab-pane {
  width: 240rpx;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 80rpx;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #888787;
  position: relative;
}
.h-tab-pane-active {
  color: #d5ad57;
  position: relative;
}
.h-tab-pane-line {
  position: absolute;
  width: 240rpx;
  bottom: 0;
  left: 0;
  height: 5rpx;
  background-color: #d5ad57;
  border-radius: 2rpx;
  transition: left linear .3s;
}
</style>
